<template>
  <div class="w-full h-[100vh] relative">
    <div class="text-[2rem] text-[var(--theme-font-color)] font-semibold pt-[28px]">
      <div class="flex flex-row justify-start items-center">
        <span class="pl-[16px] s2k:pl-[21.3px] s4k:pl-[32px]">Playback</span>
        <!-- <div class="flex flex-row pr-[16px] s2k:pr-[21.3px] s4k:pr-[32px] ml-auto">
          <svg-icon name="listMode" width="30px" height="30px" :class="['s2ksvg s4ksvg cursor-pointer svgClass', { 'svgActive': modeIndex === 1 }]" @click="modeIndex = 1"></svg-icon>
          <svg-icon name="timeLineMode" width="30px" height="30px" :class="['s2ksvg s4ksvg cursor-pointer svgClass ml-[20px] s2k:ml-[25px] s4k:ml-[40px]', { 'svgActive': modeIndex === 2 }]" @click="modeIndex = 2"></svg-icon>
        </div> -->
        <div
          :class="['ml-auto flex flex-row justify-start items-center pl-[16px] s4k:pl-[32px] s2k:pl-[21.3px] relative mr-[24px] s2k:mr-[32px] s4k:mr-[48px]']">
          <button
            class="cursor-pointer w-[98px] h-[38px] border-solid border-[var(--grid)] border-[1px] rounded-md flex flex-row justify-evenly items-center ml-[10px] bg-[var(--theme)] s4k:w-[196px] s4k:h-[76px] s4k:ml-[20px] s2k:w-[130.6px] s2k:h-[50.6px] s2k:ml-[13.3px] s2k:rounded-[8px]"
            @click="show">
            <svg-icon name="filter" width="12px" height="12px" class="svgClass s2ksvg s4ksvg"></svg-icon>
            <div class="text-[1.13rem] text-[#9CA3AF] font-Medium ">Filter</div>
            <svg-icon name="down" width="10.8px" height="18px"
              :class="['svgClass s2ksvg s4ksvg', { 'svgRotate': filterShow }]"></svg-icon>
          </button>
          <div v-show="filterShow" class="absolute right-0 top-[45px] w-[28.958vw] h-[345px] bg-[var(--theme)]  rounded-md border-solid border-[1px] border-[var(--grid)]
            s4k:left-[941px] s4k:top-[90px] s4k:h-[690px] s2k:left-[630px] s2k:top-[60px] s2k:h-[450px] z-[999]">
            <div
              class="text-[#6B7280] text-[1rem] font-SemiBold mt-[20px] pl-[16px] s4k:mt-[40px] s4k:pl-[32px] s2k:mt-[26.6px] s2k:pl-[21.3px]">
              DATE RANGE
            </div>
            <div
              class="w-[calc(100%_-_32px)] m-auto flex flex-row justify-between items-center mt-[16px] mb-[4px] s4k:w-[calc(100%_-_64px)] s4k:mt-[32px] s4k:mb-[8px] s2k:w-[calc(100%_-_42.6px)] s2k:mt-[21.3px] s2k:mb-[5.3px]">
              <span class="flex-[1] text-[1rem] text-[var(--theme-font-color)]">Start</span>
              <span
                class="flex-[1] text-[1rem] text-[var(--theme-font-color)] ml-[20px] s4k:text-[24px] s4k:ml-[40px] s2k:ml-[26.6px]">From</span>
            </div>
            <div
              class="w-[calc(100%_-_32px)] m-auto flex flex-row justify-between items-center s4k:w-[calc(100%_-_64px)] s2k:w-[calc(100%_-_42.6px)]">
              <div class="flex-[1] flex flex-row justify-start items-center">
                <div class="startTimeDate w-[58%] relative h-[37px] s4k:w-[304px] s4k:h-[74px]">
                  <svg-icon name="date" width="16px" height="16px"
                    class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"></svg-icon>
                  <a-date-picker v-model:value="FilterData.startTimeDate" placeholder="" />
                </div>
                <div class="w-[42%] h-[38px] relative ml-[5px] s4k:w-[202px] s4k:h-[76px] s4k:ml-[10px] s2k:ml-[13px]">
                  <svg-icon name="time" width="20px" height="20px"
                    class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"></svg-icon>
                  <a-time-picker v-model:value="FilterData.startTimeHM" format="HH:mm" :allowClear="false" placeholder="" />
                </div>
              </div>
              <div class="flex-[1] flex flex-row justify-start items-center ml-[20px] s4k:ml-[30px]">
                <div class="startTimeDate w-[58%] relative h-[37px] s4k:w-[304px] s4k:h-[74px]">
                  <svg-icon name="date" width="16px" height="16px"
                    class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"></svg-icon>
                  <a-date-picker v-model:value="FilterData.endTimeDate" placeholder="" />
                </div>
                <div class="w-[42%] h-[38px] relative ml-[5px] s4k:w-[202px] s4k:h-[76px] s4k:ml-[10px] s2k:ml-[13px]">
                  <svg-icon name="time" width="20px" height="20px"
                    class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"></svg-icon>
                  <a-time-picker v-model:value="FilterData.endTimeHM" format="HH:mm" :allowClear="false" placeholder="" />
                </div>
              </div>
            </div>
            <div
              class="w-[calc(100%_-_32px)] m-auto h-[1px] bg-[var(--grid)] my-[16px] s4k:w-[calc(100%_-_64px)] s4k:my-[32px] s2k:w-[calc(100%_-_42.6px)] s2k:my-[21.3px]">
            </div>
            <div class="text-[#6B7280] text-[1rem] font-SemiBold pl-[16px] s4k:pl-[32px] s2k:pl-[21.3px]">
              EVENT TYPE
            </div>
            <div id="radio"
              class="w-[calc(100%_-_32px)] m-auto flex flex-wrap justify-between mt-[10px] s4k:w-[calc(100%_-_64px)] s4k:mt-[20px] s2k:w-[calc(100%_-_42.6px)] s2k:mt-[13.3px]">
              <div class="w-[48%] flex flex-row justify-start items-center">
                <fwb-radio v-model="FilterData.picked" label="All " value="1" />
                <span class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]">(14)</span>
              </div>
              <div class="w-[48%] flex flex-row justify-start items-center">
                <fwb-radio v-model="FilterData.picked" label="Sound Event " value="2" />
                <span class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]">(9)</span>
              </div>
              <div class="w-[48%] flex flex-row justify-start items-center">
                <fwb-radio v-model="FilterData.picked" label="Continuous " value="3" />
                <span class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]">(4)</span>
              </div>
              <div class="w-[48%] flex flex-row justify-start items-center">
                <fwb-radio v-model="FilterData.picked" label="Person Event " value="4" />
                <span class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]">(5)</span>
              </div>
              <div class="w-[48%] flex flex-row justify-start items-center">
                <fwb-radio v-model="FilterData.picked" label="Motion Event " value="5" />
                <span class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]">(4)</span>
              </div>
            </div>
            <div
              class="w-[calc(100%_-_32px)] m-auto h-[1px] bg-[var(--grid)] my-[16px] s4k:w-[calc(100%_-_64px)] s4k:my-[32px] s2k:w-[calc(100%_-_42.6px)] s2k:my-[21.3px]">
            </div>
            <div class="w-[108px] h-[37px] bg-[var(--theme-search-bg)] border border-[var(--grid)] border-solid rounded-md text-center leading-[37px] text-[1.13rem] text-[var(--theme-font-color)] cursor-pointer ml-[16px] s4k:w-[216px] s4k:h-[74px] s4k:leading-[74px] s4k:text-[28px] s4k:ml-[32px]
      s2k:w-[144px] s2k:h-[49.3px] s2k:rounded-[8px] s2k:leading-[49.3px] s2k:ml-[21.3px]" @click="ApplyFilters">Apply
              Filters
            </div>
          </div>
        </div>
        <div :class="['flex flex-row pr-[16px] s2k:pr-[21.3px] s4k:pr-[32px]', store.downOptions && modeIndex == 1?'mr-[320px] s2k:mr-[426px] s4k:mr-[640px]':'']">
          <div class="p-[10px] s2k:p-[13px] s4k:p-[20px] rounded-[6px] s4k:rounded-[8px] flex" :style="{background: modeIndex == 1 ? 'var(--layout-progress-bg)': ''}">
            <svg-icon name="listMode2" width="20px" height="20px" :class="['s2ksvg s4ksvg cursor-pointer m-auto svgClass', { 'svgActive': modeIndex === 1 }]" @click="changeModeIndex"></svg-icon>
          </div>
          <div class="p-[10px] s2k:p-[13px] s4k:p-[20px] rounded-[6px] s4k:rounded-[8px] ml-[10px] s2k:ml-[13px] s4k:ml-[20px] flex" :style="{background: modeIndex == 2 ? 'var(--layout-progress-bg)': ''}">
            <svg-icon name="timeLineMode2" width="20px" height="20px" :class="['s2ksvg s4ksvg cursor-pointer m-auto svgClass', { 'svgActive': modeIndex === 2 }]" @click="modeIndex = 2"></svg-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="maskShow" @click="back"></div>
    <div v-if="modeIndex == 1">
      <Normal ref="NormalRef"/>
      <div class="w-full h-[104px] absolute bottom-[1px] z-10 bg-theme s4k:h-[208px] s2k:h-[138.6px]">
        <Footer></Footer>
      </div>
    </div>
    <div class="h-[calc(100vh_-_127px)]" v-else-if="modeIndex == 2">
      <Timeline :videoList="videoList" v-if="flag"/>
    </div>
  </div>
</template>

<script setup name="Playback">
import moment from 'moment';
import Footer from "./footer.vue";
import Table from "./table.vue";
import { onMounted, reactive, ref, watch, nextTick } from "vue";
import { FwbInput, FwbRadio } from "flowbite-vue";
import Normal from './normal.vue'
import Timeline from './timeline2.vue'
import videoSrc from '@/assets/video/life2.mp4'
import settingStore from '@/store/modules/setting'
const store = settingStore()
const modeIndex = ref(2)
const searchCamera = ref("");
const filterShow = ref(false);
const maskShow = ref(false); // 遮罩层
const back = () => {
  filterShow.value = false;
  maskShow.value = false;
};
const ApplyFilters = () => {
  console.log('FilterData', FilterData)
  back()
}
const show = () => {
  filterShow.value = true;
  maskShow.value = true;
};
const downOptions = ref(false)
const downloadShow = ref(false); // 下载
const FilterData = reactive({
  startTimeDate: '', // moment('2024/01/01', 'YYYY/MM/DD')
  startTimeHM: '', // moment('00:00', 'HH:mm')
  endTimeDate: '', // moment('2024/02/01', 'YYYY/MM/DD')
  endTimeHM: '', // moment('00:00', 'HH:mm')
  picked: 'first'
})
const accept = (param) => {
  if (param.length > 0) {
    downOptions.value = true;
  } else {
    downOptions.value = false;
  }
}
const videoList = ref([
  {id: 1, src: videoSrc, startTime: '050000', endTime: '070208', eng: 'A'},
  {id: 2, src: videoSrc, startTime: '080000', endTime: '100208', eng: 'B'},
])
// 组件销毁重建
const flag = ref(true)
// 刷新
watch(() => store.refsh, ()=>{
  flag.value = false
  nextTick(()=>{
    flag.value = true
  })
})
// const NormalRef = ref()
const changeModeIndex = () => {
  modeIndex.value = 1
  store.setDownOptions(false)
}
</script>

<style scoped lang="scss">
#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: #ffffff;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}

.svgRotate {
  transition: all 0.2s;
  transform: rotate(180deg);
}

.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

#input {
  color: #ffffff;
  font-size: 1.13rem;
  border-radius: 10px;
  border: solid 1px #4B5563;

  &:focus {
    outline: none;
    box-shadow: inset 0 0;
    border: solid 1px #4B5563;
  }
}

#radio {
  :deep(label) {
    width: auto;

    input {
      border: solid 1px var(--grid);
      background-color: var(--inputBg);
      cursor: pointer;
      height: 16px;
      width: 16px;

      &:checked {
        border: solid 4px #1C64F2;
        background-color: var(--theme-font-color);
        // border-color: #111928;
      }

      &:focus {
        box-shadow: inset 0 0;
      }
    }

    .text-sm {
      color: var(--theme-font-color);
      font-size: 1.13rem;
      font-family: Medium;
    }
  }
}

.ant-picker {
  width: 100%;
  height: 37px;
  background-color: var(--theme);
  border: solid 1px var(--grid);
  border-radius: 10px;

  :deep(input) {
    padding-left: 25px;
    color: var(--theme-font-color) !important;
  }

  :deep(svg) {
    display: none;
  }
}

.startTimeDate {
  .ant-picker {
    width: 100%;
    height: 37px;
    background-color: var(--theme);
    border: solid 1px var(--grid);
    border-radius: 10px;

    :deep(input) {
      padding-left: 25px;
      color: var(--theme-font-color) !important;
    }

    :deep(svg) {
      display: none;
    }
  }
}

@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.2);
  }

  #searchCamera {
    :deep(input) {
      height: 48px;
      padding-left: 40px;
    }
  }

  #radio {
    :deep(label) {
      input {
        width: 21.3px;
        height: 21.3px;

        &:checked {
          border: solid 5.3px #1C64F2;
        }
      }
    }
  }

  .ant-picker {
    height: 49.3px;
    padding-left: 30px;
  }

  .startTimeDate {
    .ant-picker {

      width: 202px;
      height: 49.3px;
    }
  }
}

@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(1.8) !important;
  }

  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 100px;
    }
  }

  #input {
    font-size: 28px;
  }

  #radio {
    :deep(label) {
      input {
        width: 32px;
        height: 32px;

        &:checked {
          border: solid 8px #1C64F2;
        }
      }

      .text-sm {
        font-size: 28px;
      }
    }
  }

  .ant-picker {
    width: 202px;
    height: 74px;
    padding-left: 30px;

    :deep(input) {
      font-size: 22px;
    }
  }

  .startTimeDate {
    .ant-picker {
      width: 304px;
      height: 74px;
    }
  }
}
</style>
<style lang="scss">
.datepicker-picker {
  background-color: var(--theme-ant-picker);

  button {
    background-color: var(--theme-ant-picker) !important;
    color: var(--theme-font-color);

    &:hover {
      background-color: var(--theme);
    }

    svg {
      color: var(--theme-font-color);
    }
  }

  span {
    color: var(--theme-font-color);

    &:hover {
      background-color: var(--theme-ant-picker);
    }
  }

  .dow {
    color: #929AA5;

    &:hover {
      background-color: #364251;
    }
  }
}

.ant-picker-dropdown {
  background-color: var(--theme-ant-picker);
  border-radius: 10px;

  .ant-picker-panel-container {
    background-color: var(--theme-ant-picker);

    .ant-picker-time-panel-cell-inner {
      color: var(--theme-font-color) !important;
    }
  }

  button {
    color: var(--theme-font-color) !important;
    border: solid #1677FF 1px !important;
    background-color: #1677FF !important;
  }
}

.ant-picker-dropdown .ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
  background-color: var(--theme) !important;
}

.ant-picker-cell-inner {
  color: var(--theme-font-color) !important;
}

.ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner {
  background-color: #1A56DB;

  &::before {
    border: solid #1A56DB 1px;
  }

  &:hover {
    background-color: #1A56DB !important;
  }
}

.ant-picker-header {
  button {
    background-color: var(--theme-ant-picker) !important;
    border: solid 1px var(--theme-ant-picker) !important;
  }
}

.ant-picker-content th {
  color: #929AA5 !important;
}
.svgActive {
  color: var(--layout-nav-svg);
}
</style>
